<template>
  <div class="hello">
    {{ msg.name }}
    <!-- computed通常用来监听自己定义的变量，这个变量可以不再data中定义，直接在computed中定义，
         然后可以再页面上做双向数据绑定得到这个数据。通常使用场景：添加商品到购物车，数量和金额
         会发生变化。 -->
    <div class="content">
      <h5>computed计算属性</h5>
      <span v-text="title"></span>
      <ul>
        <li v-for="(item, index) in results" :key="index">
          {{ item.name }}: <input type="text" v-model="item.score" />
        </li>
      </ul>
      {{ totalMarks }}
      <!--watch：通常用于监听data中定义好的变量，通常用于model做双向数据绑定的监听，可以监听变量，
        也可以监听一个对象。  -->
      <div class="demo1">
        <h5>watch监听属性</h5>
        <h6>demo1</h6>
        <div>
          <input type="text" v-model="value1" />
          {{ demo1 }}
        </div>
      </div>
      <div class="demo2">
        <h6>demo2</h6>
        <input type="text" v-model="value2.name" />
        {{ demo2 }}
      </div>
      <div class="demo3">
        <h6>demo3</h6>
        <input type="text" v-model="childrens.name" />
        <input type="text" v-model="lastName" />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  props: {
    msg: Object,
  },
  data() {
    return {
      title: "我是一个计算器",
      results: [
        { name: "English", score: 80 },
        { name: "Math", score: 90 },
        { name: "History", score: 70 },
      ],
      value1: "",
      demo1: "",
      value2: {
        name: "",
      },
      demo2: "",
      childrens: {
        name: "小强",
        age: 20,
        sex: "男",
      },
      lastName: "张三",
      tdArrgae: ["1", "2"],
    };
  },
  computed: {
    totalMarks() {
      let total = 0;
      // console.log(this.results);
      this.results.forEach((item) => {
        console.log(item.score);
        total += parseInt(item.score);
      });
      return total;
    },

    // 如果watch监听的是一个对象的话，直接用watch是不行的，此时可以借助于 computed计算属性来完成。
    nweName() {
      return this.value2.name;
    },
  },
  watch: {
    value1(val) {
      console.log(val);
      this.demo1 = val;
    },

    nweName(val) {
      console.log(val);
      this.demo2 = val;
    },

    childrens: {
      handler: function (val) {
        console.log(val.name);
      },
      deep: true,
    },
    // 键路径必须加上引号
    "childrens.name": function (val) {
      console.log(val + "aaaa");
    },
    // 以v-model 绑定数据时使用的数据变化监测
    lastName: function () {
      console.log(this.lastName);
    },
  },
};
// 主动调用$watch方法来进行数据监测
// vm.$watch("lastName", function (val) {
//   console.log(val + "bbb");
// });
</script>

<style scoped lang="less">
.content {
  margin: 20px;
}
h5 {
  text-align: center;
  margin: 20px;
}
</style>
